<template>
  <view class="container">
    <!-- 可转蜜豆显示 -->
    <view class="balance-box">
      <text class="balance-title">可转蜜豆</text>
      <text class="balance-amount">{{ user.balance }}</text>
    </view>

    <!-- 转账对象 -->
    <view class="form-item">
      <text class="form-label">* 转账对象：{{transferUser.username}}</text>
      <input
        class="input"
        type="text"
        placeholder="请输入编号"
        v-model="targetAccount"
		@blur="handleBlur"
      />
    </view>

    <!-- 转账蜜豆 -->
    <view class="form-item">
      <text class="form-label">* 转账蜜豆：</text>
      <input
        class="input"
        type="text"
        placeholder="请输入转账蜜豆"
        v-model="transferAmount"
      />
    </view>

    <!-- 短信验证码 -->
    <view class="form-item">
      <text class="form-label">* 短信验证码：</text>
      <view class="sms-box">
        <input
          class="sms-input"
          type="number"
          placeholder="请输入短信验证码"
          v-model="smsCode"
        />
        <button class="sms-btn" @click="getSmsCode">{{ smsButtonText }}</button>
      </view>
      <text class="sms-tip">
        短信将发送到尾号<text class="red-text">{{ lastFourDigits }}</text>的手机，请查收
      </text>
    </view>

    <!-- 提交按钮 -->
    <button class="submit-btn" @click="submitTransfer">确认提交</button>

    <!-- 注意事项 -->
    <view class="note">
      <text class="note-title">注意事项：</text>
      <text class="note-content">
        转账后不可撤回，请仔细确认对方的编号及姓名
      </text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      balance: 0, // 可转蜜豆余额
      targetAccount: "", // 转账对象
      transferAmount: "", // 转账金额
      smsCode: "", // 验证码
      phoneTail: "1101", // 手机尾号
      smsButtonText: "获取验证码", // 按钮文字
      timer: null,
      countdown: 60, // 倒计时秒数
	  user:{},
	  transferUser:{'username':''},
	  isSubmit:false
    };
  },
  onShow() {
  	/*获取个人中心数据*/
  	this.getData();
  },
  computed: {
      // 计算属性截取手机号后四位
      lastFourDigits() {
        return this.phoneTail.slice(-4);
      },
    },
  methods: {
	  /**
	   * 失去焦点时调用的函数
	   */
	  handleBlur() {
		// 调用接口
		this.fetchAccountDetails(this.targetAccount);
	  },
	  /**
	   * 模拟接口调用
	   * @param {string} account 输入的编号
	   */
	  fetchAccountDetails(account) {
		if (!account) {
		  console.log("编号不能为空");
		  return;
		}
		let self = this;
		uni.showLoading();
		self._get('user.agent/agentUserInfo', {'to_userId':account}, function(data) {
			self.transferUser = data.data;
			if(!self.transferUser){
				self.isSubmit = false
				self.transferUser = {'username':''}
				self.loadding = false;
				self.showError('用户不存在');
				return false;
			}
			self.isSubmit = true
			self.loadding = false;
			uni.hideLoading();
		});
		
	  },
	  /*获取数据*/
	  getData() {
	  	let self = this;
	  	self._get('user.agent/center', {}, function(data) {
	  		self.is_agent = data.data.is_agent;
	  		self.top_background = data.data.background;
	  		self.agent = data.data.agent;
	  		self.user = data.data.user;
			self.phoneTail = data.data.user.mobile;
	  		self.isData = true;
	  		self.loadding = false;
	  		uni.hideLoading();
	  	});
	  },
    // 获取短信验证码
    getSmsCode() {
      if (this.timer) return; // 防止重复点击
	  let self = this;
	  self._post(
	  	'user.useropen/sendSmsCode', {
	  		mobile: self.user.mobile,
	  		type: 'sendSms'
	  	},
	  	result => {
	  		if (result.code == 1) {
	  			uni.showToast({
	  				title: '发送成功'
	  			});
	  			this.smsButtonText = `${this.countdown}s`;
	  			this.timer = setInterval(() => {
	  			  this.countdown--;
	  			  this.smsButtonText = `${this.countdown}s`;
	  			  if (this.countdown <= 0) {
	  			    clearInterval(this.timer);
	  			    this.timer = null;
	  			    this.smsButtonText = "获取验证码";
	  			    this.countdown = 60;
	  			  }
	  			}, 1000);
	  		}
	  	}
	  );
    },
    // 提交转账
    submitTransfer() {
	  if(!this.isSubmit){
		  uni.showToast({
		    title: "转账对象错误",
		    icon: "none",
		  });
		  return;
	  }
      if (!this.targetAccount || !this.transferAmount || !this.smsCode) {
        uni.showToast({
          title: "请填写完整信息",
          icon: "none",
        });
        return;
      }
      if (Number(this.transferAmount) > Number(this.user.balance)) {
        uni.showToast({
          title: "余额不足",
          icon: "none",
        });
        return;
      }
      let self = this;
      self._post('user.agent/transfer_bean', {code:self.smsCode,to_userId: self.targetAccount,money:self.transferAmount},
      	function(res) {
      		console.info(res)
      		uni.hideLoading()
      		self.showSuccess(res.msg, () => {
      			self.getData();
      		});	
      	},
      	function() {
      	}
      );
    },
  },
};
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f7f7f7;
  height: 100vh;
}

/* 可转蜜豆 */
.balance-box {
  background: linear-gradient(to right, #ff7f50, #ff4500);
  padding: 80rpx;
  border-radius: 10rpx;
  text-align: center;
  color: #fff;
  margin-bottom: 40rpx;
}
.balance-title {
  font-size: 30rpx;
}
.balance-amount {
  display: block;
  font-size: 60rpx;
  font-weight: bold;
  margin-top: 20rpx;
}

/* 表单项 */
.form-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 30rpx;
}
.form-label {
  font-size: 28rpx;
  margin-bottom: 10rpx;
}
.input {
  border: 1rpx solid #ddd;
  padding: 20rpx;
  border-radius: 8rpx;
  background-color: #fff;
}

/* 短信验证码 */
.sms-box {
  display: flex;
}
.sms-input {
  flex: 1;
  border: 1rpx solid #ddd;
  padding: 20rpx;
  border-radius: 8rpx 0 0 8rpx;
  background-color: #fff;
}
.sms-btn {
  background-color: #d9d9d9;
  color: #333;
  border-radius: 0 8rpx 8rpx 0;
  font-size: 28rpx;
}
.sms-tip {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}
.red-text {
  color: red;
}

/* 提交按钮 */
.submit-btn {
  background-color: #ff4500;
  color: #fff;
  font-size: 32rpx;
  text-align: center;
  border-radius: 70rpx;
  padding: 20rpx;
}

/* 注意事项 */
.note {
  margin-top: 40rpx;
  font-size: 24rpx;
  color: #666;
}
.note-title {
  font-weight: bold;
  margin-bottom: 10rpx;
}
.note-content {
  white-space: pre-wrap;
}
</style>
